<template>
  <s-layout tabbar="/pages/xf/index">
    <view class="viewport">
      

      <!-- 任务相关数据 -->
      <view class="enterprise-card">
        <view class="container">
          <!-- 标题 -->
          <view class="card-header">
            <fui-section
              title="任务数据"
              isLine
              padding="['0', '0','0','0']"
            ></fui-section>
          </view>

          <!-- 统计卡片 -->
          <view class="fui-content">
            <view class="fui-card__group">
              <view class="fui-card__box">
                <fui-card>
                  <!-- 进度条 -->
                  <view class="progress-section">
                    <text class="section-title"
                      >任务完成进度 ({{ completedTasks }}/{{
                        totalTasks
                      }})</text
                    >
                    <view class="progress-container">
                      <fui-progress
                        :percent="progressPercent"
                        activeColor="#2B85E4"
                        :height="16"
                        :striped="true"
                        :stripedActive="true"
                        :showInfo="false"
                      >
                      </fui-progress>
                      <view class="progress-info">
                        <text class="progress-text"
                          >{{ progressPercent }}%</text
                        >
                        <text class="progress-label">完成率</text>
                      </view>
                    </view>
                  </view>
                </fui-card>
              </view>
            </view>
          </view>
        </view>
        <!-- 标题 -->
        <view class="card-header222">
          <fui-section
            title="近期任务列表"
            isLine
            padding="['0','0','0','1000rpx']"
          ></fui-section>
          <view class="time-range-selector">
            <picker
              mode="selector"
              :range="timeRangeOptions"
              @change="handleTimeRangeChange"
            >
              <view class="selector-box" style="background-color: #e6f7ff">
                <text class="selector-text">{{
                  timeRangeOptions[selectedTimeRangeIndex]
                }}</text>
                <image
                  class="selector-icon"
                  src="@/static/tabs/设置.png"
                  mode="aspectFit"
                />
              </view>
            </picker>
            <view class="all-task-link" @click="navigateToAllTasks">
              <text>全部任务</text>
              <fui-icon name="arrowright" color="#1890ff" size="32"></fui-icon>
            </view>
          </view>
        </view>
        <!-- 任务列表 -->
        <view class="enterprise-card">
          <view class="container">
            <!-- 任务列表 -->
            <view
              v-for="task in tasks"
              class="task-card"
              @click="handleTaskClick(task)"
            >
              <!-- 状态标签 -->
              <view
                class="status-corner"
                :class="task.status === '已完成' ? 'completed' : 'pending'"
              >
                <text class="status-text">{{
                  task.status === "已完成" ? "已完成" : "未完成"
                }}</text>
              </view>
              <view class="card-header2" style="align-items: flex-end"> </view>
              <view class="task-title">
                <view
                  class="task-tag"
                  :style="{
                    backgroundColor: task.tagColor || '#2b85e4',
                    border: `2rpx solid ${task.tagColor || '#2b85e4'}`,
                    background: 'transparent',
                    color: task.tagColor || '#2b85e4',
                    textAlign: 'center',
                  }"
                >
                  {{ task.tag }}
                </view>
                <text class="title-text">{{
                  task.name.length > 11
                    ? task.name.substring(0, 11) + "..."
                    : task.name
                }}</text>
              </view>
              <!-- 添加任务简介框 -->
              <view class="task-description">
                <text class="description-text">{{
                  task.describe.length > 20
                    ? task.describe.substring(0, 20) + "..."
                    : task.describe
                }}</text>
                <view
                  v-if="task.describe.length > 20"
                  class="detail-button"
                  @click.stop="showTaskDetail(task)"
                >
                  <text>详情</text>
                </view>
              </view>
              <view class="card-content">
                <view class="time-container">
                  <fui-timeaxis
                    background="#fff"
                    :padding="['0rpx', '0rpx']"
                    lineWidth="0.2"
                  >
                    <fui-timeaxis-node
                      :lineColor="index < 3 ? item.activeColor : '#ccc'"
                      :lined="index !== task.processData.length - 1"
                      v-for="(item, index) in task.processData"
                      :key="index"
                    >
                      <view
                        class="fui-node"
                        :style="{ borderColor: item.activeColor }"
                      >
                      </view>
                      <template v-slot:right>
                        <view
                          class="fui-process__node"
                          :class="{
                            'fui-node__pb':
                              index !== task.processData.length - 1,
                          }"
                        >
                          <view
                            class="fui-title"
                            :style="{
                              color: index === 3 ? item.activeColor : '#181818',
                            }"
                            >{{ item.title }}
                          </view>
                          <view class="fui-descr" v-if="item.descr">{{
                            item.descr
                          }}</view>
                          <view class="fui-time">{{ item.time }}</view>
                        </view>
                      </template>
                    </fui-timeaxis-node>
                  </fui-timeaxis>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </s-layout>

  <!-- 任务详情弹窗 -->
  <view class="modal-overlay" v-if="showDetailModal" @click="closeTaskDetail">
    <view class="modal-content" @click.stop>
      <view class="modal-header">
        <text class="modal-title">任务详情</text>
        <view class="modal-close" @click="closeTaskDetail">×</view>
      </view>
      <scroll-view class="modal-body" scroll-y>
        <view class="modal-task-title">{{ currentTaskDetail?.name }}</view>
        <view class="modal-description">{{ currentTaskDetail?.describe }}</view>
      </scroll-view>
      <view class="modal-footer">
        <button class="modal-button" @click="closeTaskDetail">关闭</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import sheep from "@/sheep";

import { onLoad } from "@dcloudio/uni-app";
// #ifdef H5
sheep.$store("user").isLogin = true;
sheep.$store("user").userInfo = {
  "city": "2",
  "county": "0",
  "createtime": "2025-05-16 17:16:04",
  "del_type": "0",
  "dept_id": "2",
  "du_email": "925374141@qq.com",
  "du_id": "1",
  "du_job": "技术总监",
  "du_name": "消防测试人员",
  "du_phone": "13015125836",
  "du_role": "1",
  "du_status": "0",
  "lev": "4",
  "people_id": "1",
  "province": "1",
  "township": "0",
  "updatetime": "2025-05-16 17:16:04",
  "user_id": "2",
  "village": "0",
  "wx_avatarUrl": "https://assess.yuejin-tech.com/upload/avatarUrl/2.jpg",
  "wx_id": "1",
  "wx_openId": "",
  "wx_pawd": "$2y$10$8Crykn6qRsQr1Xv5TCZesOX0sgb174wN67MgCpN4iOOfDR85dJ/vq",
  "wx_type": "2",
  "wx_user": "xf"
};
sheep.$store("app").template.basic.tabbar.list = sheep.$store("app").template.basic.tabbar.xflist;
// #endif



function get() {
  const params = {
    people_id: sheep.$store("user").userInfo.people_id,
  };
  console.log("params", params);
  console.log("进入index页面检查信息", sheep.$store("user").userInfo);


}

const completedTasks = ref(18);
const totalTasks = ref(30);
const progressPercent = computed(() => {
  return Math.round((completedTasks.value / totalTasks.value) * 100);
});
const tasks = ref([
  {
    id: 1,
    name: "内蒙古自治区呼和浩特市消防安全检查",
    de_name: "消防第一大队",
    status: "填写中",
    describe:
      "在辖区范围内，全面细致地检查各类消防设施和安全设备。这其中涵盖了灭火器、消火栓、自动喷水灭火系统、火灾自动报警系统等关键设施。检查过程中，不仅要查看设备是否完备，更要检测其性能是否正常，是否在有效期内。通过严格检查，确保整个辖区的消防安全处于可控状态。同时，依据检查结果，制定科学合理且具有针对性的安全措施，包括消防设施的定期维护计划、员工的消防安全培训方案以及火灾应急预案等，以有效预防火灾事故的发生，保障人民生命财产安全。",
    tag: "行业",
    tagColor: "#2b85e4",
    progressPercent: "70",
    processData: [
      {
        title: "开始时间",
        time: "2023/3/6 07:00",
      },
      {
        title: "结束时间",
        time: "2023/3/6 08:00",
      },
    ],
  },
  {
    id: 2,
    name: "消防演练",
    de_name: "消防第二大队",
    year: "2023/3/6-2023/3/7",
    status: "已完成",
    describe: "组织消防应急演练,模拟火灾发生,提高人员安全意识和应急响应能力",
    tag: "行业",
    tagColor: "#2b85e4",
    progressPercent: "70",
    processData: [
      {
        title: "开始时间",
        time: "2023/3/6 09:00",
      },
      {
        title: "结束时间",
        time: "2023/3/6 11:00",
      },
    ],
  },
  {
    id: 2,
    name: "消防演练",
    de_name: "消防第二大队",
    year: "2023/3/6-2023/3/7",
    status: "已完成",
    describe: "组织消防应急演练,模拟火灾发生,提高人员安全意识和应急响应能力",
    tag: "行业",
    tagColor: "#2b85e4",
    progressPercent: "70",
    processData: [
      {
        title: "开始时间",
        time: "2023/3/6 09:00",
      },
      {
        title: "结束时间",
        time: "2023/3/6 11:00",
      },
    ],
  },
  {
    id: 3,
    name: "中华人民共和国内蒙古自治区消防知识培训",
    de_name: "消防第三大队",
    year: "2023/3/6-2023/3/7",
    status: "未开始",
    describe:
      "开展消防知识普及培训,提高从业人员安全意识和应急响应能力,确保辖区内的消防安全",
    tag: "单位",
    tagColor: "#00C853",
    progressPercent: "70",
    processData: [
      {
        title: "开始时间",
        time: "2023/3/6 13:00",
      },
      {
        title: "结束时间",
        time: "2026/3/6 15:00",
      },
    ],
  },
  {
    id: 4,
    name: "消防设备维护",
    de_name: "消防第四大队",
    year: "2023/3/7-2023/3/7",
    status: "评估中",
    describe: "维护和检修消防设备",
    tag: "区域",
    tagColor: "#FF5722",
    progressPercent: "70",
    processData: [
      {
        title: "开始时间",
        time: "2023/3/7 08:00",
      },
      {
        title: "结束时间",
        time: "2023/3/7 10:00",
      },
    ],
  },
  {
    id: 5,
    name: "火灾隐患排查",
    de_name: "消防第五大队",
    year: "2023/3/6-2023/3/7",
    status: "未完成",
    describe: "排查辖区内的火灾隐患",
    tag: "行业",
    tagColor: "#2b85e4",
    progressPercent: "2",
    processData: [
      {
        title: "开始时间",
        time: "2023/3/6 14:00",
      },
      {
        title: "结束时间",
        time: "2025/4/8 16:29",
      },
    ],
  },
]);

// 方法
const navigateToDetail = (enterprise) => {
  console.log("enterprise", enterprise);
    uni.navigateTo({
      url: `/pages/xf/qydetails/qytail?company_id=${
        enterprise.company_id
      }&task_id=${enterprise.id}`,
    });
};




const timeRangeOptions = ref(["近3天", "近7天", "近15天", "近30天"]);
const selectedTimeRangeIndex = ref(0);

const handleTimeRangeChange = (e) => {
  selectedTimeRangeIndex.value = e.detail.value;
  // 这里可以根据选择的时间范围过滤任务列表
};

const navigateToAllTasks = () => {
  uni.navigateTo({
    url: `/pages/xf/alltasks`,
  });
};

const handleTaskClick = (task) => {
  console.log("task",task);
  // 根据 t_num 值来判断跳转逻辑
  if (task.t_num && task.t_num > 1) {
    // 如果 t_num 大于 1，跳转到任务企业列表
    uni.navigateTo({
      url: `/pages/xf/taskEnterpriseList?t_id=${task.id}`,
    });
  } else {
    // 否则跳转到任务详情页
    navigateToDetail(task);
  }
};

const currentTaskDetail = ref(null);
const showDetailModal = ref(false);

const showTaskDetail = (task) => {
  currentTaskDetail.value = task;
  showDetailModal.value = true;
};

const closeTaskDetail = () => {
  showDetailModal.value = false;
};


onLoad(() => {

  const params = {
    dept_user_id: sheep.$store("user").userInfo.people_id,
  };
  sheep.$api.xf_index.getTaskList(params).then((res) => {
    console.log("listData", res);
    tasks.value = res.taskList.map((item) => {
      // 根据t_status状态确定任务状态
      let status = "未开始";
      if (item.t_state == "1") {
        status = "评估中";
      } else if (item.t_state == "2") {
        status = "已完成";
      }

      // 根据任务类型设置标签和颜色
      let tag = "行业";
      let tagColor = "#2b85e4";

      if (item.t_type == "1") {
        tag = "区域";
        tagColor = "#FF5722";
      } else if (item.t_type == "3") {
        tag = "单位";
        tagColor = "#00C853";
      }

      return {
        id: item.t_id,
        name: item.t_name,
        de_name: "消防部门", // 可根据实际情况设置，这里使用默认值
        status: status,
        describe: item.t_describe,
        tag: tag,
        company_id: item.company_id,
        tagColor: tagColor,
        t_num: item.t_num || 0, // 保留t_num字段，如果为空则默认为0
        processData: [
          {
            title: "开始时间",
            time: item.t_s_date.replace(/-/g, "/"),
            activeColor: "#465CFF",
          },
          {
            title: "结束时间",
            time: item.t_e_date.replace(/-/g, "/"),
            activeColor: status === "已完成" ? "#465CFF" : "",
          },
        ],
      };
    });

    // 更新完成任务数量和总任务数量，直接使用API返回的数据
    totalTasks.value = res.taskAllCount || 0;
    completedTasks.value = res.taskEndCount || 0;
  });
});
</script>

<style lang="scss" scoped>
page {
  background: linear-gradient(180deg, #f0f3f8 0%, #ffffff 100%);
  min-height: 100vh;
}

// 卡片容器
.enterprise-card {
  background: #ffffff;
  border-radius: 5px;
  width: 96%;
  margin: 0 auto;
  margin-top: 15rpx;
  box-shadow: 0 12rpx 48rpx rgba(82, 137, 255, 0.08);
}

.container {
  width: 94%;
  margin: auto;
  border-radius: 5px;
  background-color: #fff;
}

.header {
  padding: 30rpx;
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.task-list {
  height: calc(100vh - 160rpx);
}

.task-card {
  background: #fcfcfc;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 1rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
  position: relative;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.card-header222 {
  padding: 20rpx 20rpx;
}

.task-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 20rpx;
  position: relative;
  padding-left: 70rpx;
  display: flex;
  align-items: center;

  .title-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .task-tag {
    position: absolute;
    left: -5rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 60rpx;
    height: 60rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
  }
}

.status-tag {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.status-pending {
  background: #f0f0f0;
  color: #666;
}

.status-processing {
  background: #e6f4ff;
  color: #1890ff;
}

.status-completed {
  background: #f6ffed;
  color: #52c41a;
}

.card-content {
  margin-top: 20rpx;
  // margin-bottom: 20rpx;
}

.card-header2 {
  display: flex;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 20rpx;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  margin: 20rpx 0;
}

.stat-item {
  text-align: center;
  flex: 1;
  padding: 20rpx;
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.stat-number {
  display: block;
  font-size: 40rpx;
  font-weight: 700;
  color: #2b85e4;
  margin-bottom: 8rpx;
}

.stat-number.urgent {
  color: #e64340;
}

.stat-label {
  font-size: 28rpx;
  color: #666;
}

.progress-section {
  padding: 30rpx;
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
  color: #1a1a1a;
}

.progress-container {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.progress-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-text {
  color: #2b85e4;
  font-weight: 700;
  font-size: 26rpx;
}

.progress-label {
  font-size: 28rpx;
  color: #666;
}

.avatar-box {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 24rpx;
  border: 2rpx solid #f0f0f0;
}

.enterprise-info {
  display: flex;
  align-items: center;

  .enterprise-info-txt {
    font-size: 25rpx;
    color: #666;
  }

  .enterprise-info-image {
    width: 25rpx;
    height: 25rpx;
  }
}

.enterprise-name-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 25rpx;
}

.info-item {
  display: flex;
  align-items: center;
  margin-top: 12rpx;
}

.info-text {
  margin-left: 12rpx;
  font-size: 30rpx;
  color: #666;
}

.fui-icon__box {
  padding-left: 24rpx;
  padding-right: 12rpx;
}

.task-list {
  height: calc(100vh - 160rpx);
}

.task-card {
  background: #fcfcfc;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 1rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.task-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 20rpx;
}

.card-header2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar {
  width: 100%;
  height: 100%;
}

// 卡片容器
.enterprise-card {
  background: #ffffff;
  border-radius: 5px;
  width: 96%;
  margin: 0 auto;
  margin-top: 15rpx;
  box-shadow: 0 12rpx 48rpx rgba(82, 137, 255, 0.08);
}

// 主体内容
.card-body {
  width: 94%;
  margin: 10rpx auto;

  // 企业LOGO与名称
  .enterprise-profile {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    justify-content: space-between;

    .enterprise-logo {
      width: 120rpx;
      height: 120rpx;
      border-radius: 24rpx;
      border: 2rpx solid #f0f3f8;
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
    }

    .enterprise-name {
      display: inline-block;
      max-width: 10em;
      /* 中文约10字 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      font-size: 36rpx;
      font-weight: 600;
      color: #1a1a1a;
      margin-left: 32rpx;
    }
  }

  // 信息网格布局
  .info-grid {
    background: #fafbff;
    border-radius: 16rpx;
    padding: 5rpx;
    margin-bottom: 20rpx;
    box-shadow: 4rpx 4rpx 12rpx rgba(0, 0, 0, 0.15);

    .info-item {
      padding: 12rpx 0;

      .item-content {
        margin-left: 24rpx;
        display: flex;

        .item-label {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 8rpx;
          width: 120rpx;
          flex-shrink: 0;
        }

        .item-value {
          margin-left: 10rpx;
          font-size: 26rpx;
          color: #333;
          font-weight: 500;
          overflow: hidden;
          /* 隐藏溢出内容 */
          white-space: nowrap;
          /* 禁止换行 */
          text-overflow: ellipsis;
          /* 显示省略号 */
          width: 80%;
          /* 必须设置宽度 */
        }
      }
    }

    .divider {
      height: 2rpx;
      background: #f0f3f8;
    }
  }
}

.list-item-right-tag-box2 {
  background-color: #dee6f7;
  display: inline-block;
  margin-bottom: 5rpx;
  padding: 3rpx 13rpx;
  border-radius: 8px;
  margin-right: 10rpx;
}

.list-item-right-tag-box-text2 {
  height: 30rpx;
  font-size: 20rpx;
  font-weight: 550;
  color: #0038b1;
}

// 企业列表容器
.enterprise-list-container {
  background: #ffffff;
  border-radius: 16rpx;
  width: 96%;
  margin: 0 auto;
  margin-top: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}

// 企业列表项
.enterprise-list-item {
  background: #fcfcfc;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 1rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

// 企业列表头像
.enterprise-list-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 24rpx;
  border: 2rpx solid #f0f0f0;
}

// 企业列表信息
.enterprise-list-info {
  flex: 1;
}

// 企业列表名称
.enterprise-list-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12rpx;
}

.time-container {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.time-item {
  display: flex;
  align-items: center;
}

.time-label {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

// 状态角标
.status-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 120rpx;
  height: 120rpx;
  background: #ff4d4f;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-top-right-radius: 16rpx;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10rpx;

  &.completed {
    background: #52c41a;
  }

  &.pending {
    background: #4c3af3;
  }
  .status-text {
    font-size: 24rpx;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 40%;
    left: 54%;
    transform: translate(-40%, -60%) rotate(45deg);
    white-space: nowrap;
    padding: 4rpx;
    width: 100%; // 添加宽度
    text-align: center; // 文字居中
    overflow: visible; // 确保内容可见
    transform-origin: center center; // 设置旋转中心
  }
}
.fui-node {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ccc;
  box-sizing: border-box;
}

.fui-process__node {
  padding-left: 20rpx;
}

.fui-node__pb {
  padding-bottom: 48rpx;
}

.fui-title {
  font-size: 30rpx;
  line-height: 34rpx;
  font-weight: bold;
}

.fui-descr {
  font-size: 28rpx;
  padding-top: 12rpx;
  color: #7f7f7f;
}

.fui-time {
  font-size: 24rpx;
  color: #b2b2b2;
  padding-top: 12rpx;
}

.time-range-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.selector-box {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  background-color: #f5f7fa;

  .selector-text {
    font-size: 28rpx;
    color: #333;
    margin-right: 8rpx;
  }
}

.selector-icon {
  width: 30rpx;
  height: 30rpx;
}

.all-task-link {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  background-color: #e6f7ff;

  text {
    font-size: 28rpx;
    color: #1890ff;
    margin-right: 8rpx;
  }

  &:active {
    background-color: #bae7ff;
  }
}

.progress-box {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  background-color: #2b85e4;
  border-radius: 8rpx;
  padding: 8rpx 16rpx;
  color: #fff;
  font-weight: bold;
  font-size: 24rpx;
}

.ghost-button {
  background-color: transparent;
  border: 2rpx solid #2b85e4;
  color: #2b85e4;
}

// 添加任务简介的样式
.task-description {
  background-color: #f5f7fa;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  margin: 10rpx 0 20rpx 0;
  font-size: 26rpx;
  color: #666;
  border-left: 6rpx solid #2b85e4;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.description-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-button {
  padding: 6rpx 16rpx;
  background-color: #e6f7ff;
  border-radius: 8rpx;
  margin-left: 16rpx;
  font-size: 24rpx;
  color: #2b85e4;
  font-weight: 500;
}

// 模态窗口样式
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-content {
  width: 80%;
  max-height: 80%;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;
}

.modal-body {
  padding: 30rpx;
  flex: 1;
  max-height: 60vh;
}

.modal-task-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.modal-task-tag {
  display: inline-block;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: 500;
  border: 2rpx solid;
  background-color: transparent;
  margin-bottom: 30rpx;
}

.modal-description-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.modal-description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.modal-footer {
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  justify-content: flex-end;
}

.modal-button {
  padding: 16rpx 40rpx;
  background-color: #2b85e4;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
}
</style>
